 <!-- 投诉列表页面 -->
 <template>
 	<view class="content">
 		<!-- 返回主页 -->
 		<view class="back" @click="back">
 			<view class="backicon"></view>
 		</view>
 		<view class="title">
 			<text>考勤申诉</text>
 		</view>
 		<!-- 投诉列表 -->
 		<view class="fun">
 			<view v-if="indexList.length==0" style="margin-top: 270rpx;">
 				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
 				</u-empty>
 			</view>
 			<view style="">
 				<u-list height="1400rpx" @scrolltolower="scrolltolower"><!--  滑动到底部触发的事件-->
 					<u-list-item v-for="(item, index) in indexList" :key="index">
 						<view class="stu" @click="show=true,id=item.id,
 							name = item.sname,cname = item.cname
							,create_time = item.create_time,status=item.status">
 							<view style="margin-top: 20rpx;
 								float: left; width: 100rpx;
 								height: 120rpx;border-radius: 20rpx; 
 								background-color: #aaaaff;
 								margin-left: 20rpx;">
 								<view class="tx"></view>
 							</view>
 							<view class="stuname1">
 								<text>{{item.sname}}</text>
 								<text style="display: inline-block;font-size: 28rpx;" v-if="item.status==5">（旷课）</text>
 								<text style="display:  inline-block;font-size: 28rpx;"
 									v-else-if="item.status==4">（迟到）</text>
 								<text style="display:  inline-block;font-size: 28rpx;"
 									v-else-if="item.status==3">（早退）</text>
 								<text style="display:  inline-block;font-size: 28rpx;"
 									v-else-if="item.status==2">（请假）</text>
 								<text style="display:  inline-block;font-size: 28rpx;"
 									v-else-if="item.status==1">（已到）</text>
 								<view style="font-size: 28rpx;">{{item.cname}}</view>
 								<view style="font-size: 28rpx;">
 									<text>{{item.create_time | replace}}</text>
 								</view>
 							</view>
 							<view v-if="item.Auditstatus==0"
 								style="margin-top: 20rpx;float: right; margin-right: 20rpx;color: #888888;"><!--  -->
 								<text>未处理</text>
 							</view>
 							<view v-else style="margin-top: 20rpx;float: right; margin-right: 20rpx;color: #888888;">
 								<!--  -->
 								<text>已处理</text>
 							</view>
 						</view>
 					</u-list-item>
 				</u-list>
 			</view>
 		</view>

 		<!-- 弹窗看详情 -->
 		<u-popup :show="show" :round="20" mode="bottom" closeable @close="close" @open="open">
 			<view>
 				<view class="name1">
 					<text style="margin-left: 20rpx; color: #555555;">上传人:</text>
 					<view style="margin-left: 110rpx;margin-top: -60rpx;
 						text-overflow: ellipsis;overflow: hidden;
 						white-space: nowrap;
 						width: 500rpx;">
 						<text style="margin-left: 20rpx;">{{name}}</text>
 					</view>
 				</view>
 				<view class="name1" style="margin-top: 20rpx;">
 					<view style="float: left;margin-right: 20rpx;">
 						<text style="margin-left: 20rpx; color: #555555;">班级:</text>
 						<text style="margin-left: 20rpx;">{{cname}}</text>
 					</view>
 				</view>
 				<view class="name1" style="margin-top: 20rpx;">
 					<view style="margin-right: 20rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
 						<text style="margin-left: 20rpx; color: #555555;">课程名: </text>
 						<text style="margin-left: 20rpx;">{{feedbackinfo.coursename}}</text>
 					</view>
 				</view>
 				<view class="name1" style="margin-top: 20rpx;height: 80rpx;">
 					<view style="float: left;margin-right: 20rpx;">
 						<text style="margin-left: 20rpx; color: #555555;">时间: </text>
 						<text style="margin-left: 20rpx">{{feedbackinfo.date | subString}} 第{{feedbackinfo.classtime}}节</text>
 					</view>
 				</view>
 				<view class="name1" style="margin-top: 20rpx;height: 80rpx;">
 					<view style="float: left;margin-right: 20rpx;">
 						<text style="margin-left: 20rpx; color: #555555;">申请修改为:</text>
 						<text style="margin-left: 20rpx;font-size: 30rpx;"
 							v-if="feedbackinfo.changeStatus==1">已到</text>
 						<text style="margin-left: 20rpx;font-size: 30rpx;"
 							v-if="feedbackinfo.changeStatus==2">请假</text>
 					</view>
 				</view>
 				<view class="contenttext">
 					<view class="name2">
 						<text style="">内容:</text>
 					</view>
 					<view style="width: 630rpx; margin-left: 20rpx;margin-top: -10rpx;">
 						<u--textarea v-model="feedbackinfo.description" placeholderStyle="color: red;"
 							disableDefaultPadding border="none" count showConfirmBar maxlength=200 disabled
 							autoHeight="true"></u--textarea>
 					</view>
 				</view>
 				<view style="margin-left: 20rpx; margin-top: 30rpx;" v-for=' item in imglist'>
 					<!--  v-for="(item, index) in imglist" -->
 					<view class="img" @click="showimg=item">
 						<img :src="item" style="border-radius: 25rpx; width: 200rpx;height: 200rpx;"
 							@click="clickImg(item)">
 					</view>
 				</view>
 			</view>
 			<view>
 				<u-button type="success" shape="circle" :plain="true"
 					customStyle="display: inline-block; margin-left: 120rpx;width:200rpx;" text="同意"
 					@click="updatestatus"></u-button>
 				<u-button type="warning" shape="circle" :plain="true"
 					customStyle="display: inline-block; margin-left: 120rpx;width:200rpx;" text="不同意"
 					@click="turnonModel"></u-button>
 			</view>
 			<view>
 				<u-modal :show="showModel" title="请填写原因来回复学生" showCancelButton="true" showConfirmButton="true"
 					buttonReverse="true" @confirm="writeLetter" @cancel="closeModel" closeOnClickOverlay="true">
 					<textarea v-model="reason" auto-height="true" maxlength="200" placeholder="请输入原因,最多为200字"
 						placeholder-style="font-weight:200">	</textarea>
 				</u-modal>
 			</view>
 			<view>

 			</view>
 		</u-popup>

 	</view>
 </template>

 <script>
 	import {
 		HNIT_URL,
 		IDENTITY,
 		USERNAME
 	} from "@/constants/index.js";
 	// import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
 	import col from "../../../uni_modules/uview-ui/libs/config/props/col";
 	export default {
 		// components: { previewImage}, //注册插件
 		data() {
 			return {
 				//内容
 				description: "",
 				show: false,
 				show1: false,
 				//存储内容
 				indexList: [],
 				id: "",
 				name: "",
 				//存储图片
 				imglist: [],
 				showimg: "",
 				//创建时间
 				time: "",
 				//学生姓名
 				cname: "",
 				//课程名
 				coursename: "",
 				create_time: "",
 				//页数
 				page: 1,
 				imagelist: [],
 				//查询出来的信息
 				feedbackinfo: [],
 				//打开模态框
 				showModel: false,
 				//不同意的原因
 				reason: ""
 			}
 		},
 		onShow() {
 			this.query()
 		},
 		//拦截器
 		filters: {
 			//替换空格
 			replace(value) {
 				if (!value) return "";
 				return value.replace("T", "  ");
 			},
 			//截取
 			subString(value) {
 				if (!value) return "";
 				return value.substring(0, 10)
 			}
 		},
 		methods: {
 			//查询第一页
 			query() {
 				let username = uni.getStorageSync(USERNAME)
 				// 发起请求
 				let params = {
 					page: this.page,
 					username: username
 				}
 				this.$request.post(HNIT_URL + "wx/queryStuAttendanceInfoByTea", params).then(res => {
 					this.indexList = res.data
 				})
 			},
 			// 点击查看大图
 			clickImg(img) {
 				var imgUrl = img
 				wx.previewImage({
 					urls: [imgUrl],
 					current: '',
 					success: function(res) {},
 					fail: function(res) {},
 					complete: function(res) {}
 				})
 			},
 			turnonModel() {
 				this.showModel = true
 			},
 			closeModel() {
 				this.showModel = false
 			},
 			//修改状态
 			updatestatus() {
 				let item = this.indexList.find((item) => {
 					return item.id == this.id;
 				});
 				let params = {
 					stuid: item.stuid,
 					Attid: item.Attid,
 					status: this.feedbackinfo.changeStatus
 				}
 				this.$request.post(HNIT_URL + "wx/updateStatus", params).then(res => {
 					uni.showToast({
 						icon: "none",
 						title: res.msg,
 						duration: 2000
 					})
 					this.close();
 					this.page = 1;
 					this.query();
 				})
 			},
 			//不同意处理
 			writeLetter() {
 				let item = this.indexList.find((item) => {
 					return item.id == this.id;
 				});
 				let params = {
 					stuid: item.stuid,
 					Attid: item.Attid,
 					teacherReply: this.reason
 				}
 				this.$request.post(HNIT_URL + "wx/updateSta", params).then(res => {
 					uni.showToast({
 						icon: "none",
 						title: res.msg,
 						duration: 2000
 					})
 					this.close();
 					this.page = 1;
 					this.query();
 				})
 			},
 			//滑动底部加载事件
 			scrolltolower() {
 				let username = uni.getStorageSync(USERNAME)
 				this.page = this.page + 1
 				let params = {
 					page: this.page,
 					username: username
 				}
 				this.$request.post(HNIT_URL + "wx/queryStuAttendanceInfoByTea", params).then(res => {
 					if (Object.keys(res.data).length == 0) {
 						uni.showToast({
 							icon: "none",
 							title: "已经到底了"
 						})
 					} else {
 						this.indexList = this.indexList.concat(res.data)
 					}

 				})
 			},

 			closeimg() {
 				this.show1 = false
 				this.showimg = ""
 			},
 			openimg() {},
 			//打开弹窗处理
 			open() {
 				let item = this.indexList.find((item) => {
 					return item.id == this.id;
 				});
 				// 请求参数
 				let params = {
 					id: this.id,
 				}
 				this.$request.post(HNIT_URL + "wx/queryImagePath", params).then(res => {
 					this.feedbackinfo = res.data
 					let index = 0;
 					var commaIndex = this.feedbackinfo.imagePath.indexOf(",");
 					if (commaIndex !== -1) {
 						for (let i = 0; i <= 2; i++) {
 							var img = this.feedbackinfo.imagePath.substring(index, index + this.feedbackinfo
 								.imagePath.indexOf(","));
 							index = index + img.length + 1
 							img = img.replace(/\\/g, "\/"); // 替换 \ => /
 							this.imglist.push(HNIT_URL + "uploadfile/" + img) // +
 						}
 					} else {
 						// 没有逗号的处理逻辑
 						var img = this.feedbackinfo.imagePath.substring(index);
 						img = img.replace(/\\/g, "\/"); // 替换 \ => /
 						this.imglist.push(HNIT_URL + "uploadfile/" + img) // +
 					}

 				})
 			}, 
 			close() {
 				this.show = false
 				this.imglist = []
 			},
 			//返回处理	
 			back() {
 				let identity = uni.getStorageSync(IDENTITY)

 				if (identity == 4) {
 					uni.reLaunch({
 						url: '/pages/manage/home/index'
 					});

 				} else {
 					uni.reLaunch({
 						url: '/pages/teacher/home/index'
 					});
 				}

 			},
 		}
 	}
 </script>

 <style>
 	@import url(index.css);
 </style>